<template>
  <aside class="sidebar">
    <h2>菜单</h2>
    <ul>
      <li><a href="#" @click.prevent="navigateTo('users')">用户管理</a></li>
      <li><a href="#" @click.prevent="navigateTo('vehicles')">车辆管理</a></li> <!-- 新增车辆管理选项 -->
      <li><a href="#" @click.prevent="navigateTo('appointments')">预约管理</a></li> <!-- 新增预约管理选项 -->
      <li><a href="#" @click.prevent="navigateTo('reviews')">评论管理</a></li> <!-- 新增评论管理选项 -->
      <li><a href="#" @click.prevent="navigateTo('orders')">商品订单管理</a></li> <!-- 新增评论管理选项 -->
      <li><a href="#" @click.prevent="navigateTo('ProductsOrders')">车辆订单管理</a></li> <!-- 新增导航项 -->
    </ul>
  </aside>
</template>

<script>
export default {
  name: 'Sidebar',
  methods: {
    navigateTo(page) {
      this.$emit('select', page); // 更改事件名为 'select' 以匹配 Home.vue 中的处理程序
    },
  },
};
</script>

<style scoped>
.sidebar {
  width: 250px;
  background-color: #333;
  color: #b94242;
  padding: 20px;
  box-sizing: border-box;
}

.sidebar h2 {
  color: #fff;
  margin-top: 0;
}

.sidebar ul {
  list-style: none;
  padding: 0;
}

.sidebar li {
  margin-bottom: 10px;
  cursor: pointer; /* 添加指针效果 */
}

.sidebar a {
  color: #fff;
  text-decoration: none;
  transition: font-size 0.3s ease; /* 为字体大小的变化添加平滑过渡效果 */
}

.sidebar a:hover {
  font-size: 20px; /* 鼠标悬停时字体增大 */
}
</style>
